<template>
  <div>
    <table class="table table-bordered table-vertical-middle" v-loading="loading">
      <tr>
        <td colspan="4" class="font-weight-bold text-center">主体基本信息</td>
      </tr>
      <tr>
        <td class="td-label" width="20%">主体名称</td>
        <td width="30%" :class="tdClass">
          <span v-if="isView">{{ customer.customer_name || '-' }}</span>
          <el-input v-else v-model="customer.customer_name" placeholder="主体名称"></el-input>
        </td>
        <td class="td-label" width="20%">主体类型</td>
        <td width="30%" :class="tdClass">
          <span v-if="isView">{{ customer.org_class_name }}</span>
          <select-farm-org
            v-else
            class="form-control-ml"
            v-model="customer.org_class"
            placeholder="主体类型"
            @select="setClassName"
          ></select-farm-org>
        </td>
      </tr>
      <tr>
        <td class="td-label">主营产业</td>
        <td>{{ customer.main_business || '' }}</td>
        <td class="td-label">经营年限(年)</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.bussiness_years || '-' }}</span>
          <el-input
            v-else
            v-input-number="{ min: 0, fixed: 0 }"
            placeholder="经营年限"
            v-model="customer.bussiness_years"
          ></el-input>
        </td>
      </tr>
      <tr v-if="+customer.customer_type === 1">
        <td class="td-label">营业证号</td>
        <td colspan="3" :class="tdClass">
          <span v-if="isView">{{ customer.register_no || '-' }}</span>
          <el-input
            v-else
            @change="checkRegisterNo"
            v-model="customer.register_no"
            placeholder="社会信用代码"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">经营地址</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.address || '-' }}</span>
          <select-address
            v-else
            auto-top
            class="form-control-ml"
            placeholder="经营地址"
            v-model="customer.address_code"
          ></select-address>
        </td>
        <td class="td-label">详细地址</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.address_detail || '-' }}</span>
          <el-input v-else placeholder="详细地址" v-model="customer.address_detail"></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">负责人</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.corp_name || '-' }}</span>
          <el-input v-else placeholder="负责人" v-model="customer.corp_name"></el-input>
        </td>
        <td class="td-label">联系电话</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.mobile_no || '-' }}</span>
          <el-input
            v-else
            placeholder="联系电话"
            @change="checkMobileNo"
            v-model="customer.mobile_no"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">身份证号</td>
        <td :class="tdClass" colspan="3">
          <span v-if="isView">{{ customer.lender_idcard || '-' }}</span>
          <el-input
            v-else
            placeholder="身份证号"
            @change="checkIdCard"
            v-model="customer.lender_idcard"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td colspan="4" class="font-weight-bold text-center">贷款申请信息</td>
      </tr>
      <tr>
        <td class="td-label">申请金额(万元)</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.apply_funds || '-' }}</span>
          <el-input
            v-else
            v-input-number="{ min: 0, fixed: 2 }"
            placeholder="申请金额(万元)"
            v-model="customer.apply_funds"
          ></el-input>
        </td>
        <td class="td-label">贷款年限(年)</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.load_years || '-' }}</span>
          <el-input
            v-else
            v-input-number="{ min: 0, fixed: 0 }"
            placeholder="贷款年限(年)"
            v-model="customer.load_years"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">贷款用途</td>
        <td :class="tdClass" colspan="3">
          <span v-if="isView">{{ customer.funds_use_dir || '-' }}</span>
          <el-input
            v-else
            type="textarea"
            :autosize="{ minRows: 3 }"
            placeholder="贷款用途"
            v-model="customer.funds_use_dir"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td colspan="4" class="font-weight-bold text-center">经营信息</td>
      </tr>
      <tr>
        <td class="td-label">经营模式</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.business_model || '-' }}</span>
          <el-input v-else placeholder="经营模式" v-model="customer.business_model"></el-input>
        </td>
        <td class="td-label">年收入(万元)</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.annual_income || '-' }}</span>
          <el-input
            v-else
            v-input-number="{ min: 0, fixed: 2 }"
            placeholder="年收入(万元)"
            v-model="customer.annual_income"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">{{ typeLabel.business_spec0 }}</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.business_spec0 || '-' }}</span>
          <el-input
            v-else
            :placeholder="typeLabel.business_spec0"
            v-model="customer.business_spec0"
          ></el-input>
        </td>
        <td class="td-label">{{ typeLabel.business_spec1 }}</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.business_spec1 || '-' }}</span>
          <el-input
            v-else
            :placeholder="typeLabel.business_spec1"
            v-model="customer.business_spec1"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">{{ typeLabel.business_spec2 }}</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.business_spec2 || '-' }}</span>
          <el-input
            v-else
            :placeholder="typeLabel.business_spec2"
            v-model="customer.business_spec2"
          ></el-input>
        </td>
        <td class="td-label">{{ typeLabel.business_spec3 }}</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.business_spec3 || '-' }}</span>
          <el-input
            v-else
            :placeholder="typeLabel.business_spec3"
            v-model="customer.business_spec3"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td colspan="4" class="font-weight-bold text-center">实际控制人家庭资产</td>
      </tr>
      <tr>
        <td class="td-label">商品房面积(平方米)</td>
        <td :class="tdClass" colspan="3">
          <span v-if="isView">{{ customer.commercial_residential_building || '-' }}</span>
          <el-input
            v-else
            placeholder="商品房面积(平方米)"
            v-model="customer.commercial_residential_building"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">购买时间</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.purchasing_date || '-' }}</span>
          <el-input v-else placeholder="购买时间" v-model="customer.purchasing_date"></el-input>
        </td>
        <td class="td-label">购买价值(万元)</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.buy_value || '-' }}</span>
          <el-input v-else placeholder="购买价值(万元)" v-model="customer.buy_value"></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">
          自建住房面积
          <div>(平方米)</div>
        </td>
        <td :class="tdClass" colspan="3">
          <span v-if="isView">{{ customer.build_house_self || '-' }}</span>
          <el-input
            v-else
            placeholder="自建住房面积(平方米)"
            v-model="customer.build_house_self"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">建造时间</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.construction_time || '-' }}</span>
          <el-input v-else placeholder="建造时间" v-model="customer.construction_time"></el-input>
        </td>
        <td class="td-label">建造价值</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.constructed_value || '-' }}</span>
          <el-input
            v-else
            placeholder="购买价值(万元)"
            v-model="customer.constructed_value"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">个人车辆(品牌)</td>
        <td :class="tdClass" colspan="3">
          <span v-if="isView">{{ customer.car_myself || '-' }}</span>
          <el-input v-else placeholder="个人车辆(品牌)" v-model="customer.car_myself"></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">购置时间</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.purchasing_date_car || '-' }}</span>
          <el-input v-else placeholder="购置时间" v-model="customer.purchasing_date_car"></el-input>
        </td>
        <td class="td-label">购置价值(万元)</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.acquisition_value || '-' }}</span>
          <el-input
            v-else
            placeholder="购置价值(万元)"
            v-model="customer.acquisition_value"
          ></el-input>
        </td>
      </tr>
    </table>

    <div class="text-center py-3" v-if="!isView">
      <el-button type="primary" class="btn-long" @click="onSubmit">保存</el-button>
      <el-button class="btn-long" @click="beforClose">取消</el-button>
    </div>
  </div>
</template>

<script>
import { enumTypeLabel } from '@/gov/views/bus/import/class/components/enum'
import SelectFarmOrg from '@/components/select/SelectFarmOrg'
import SelectAddress from '@/components/select/SelectAddress'
import { idCardValidate, licenseValidate } from '@vimi/utils-tool'
import { checkPhoneNumber } from '@/common/plugins/validator'
export default {
  components: {
    SelectFarmOrg,
    SelectAddress,
  },
  props: {
    queryId: String,
    viewMode: { type: Boolean, default: true },
  },
  data() {
    return {
      tableName: 'credit_industrial',
      loading: false,
      customer: {},
      customerData: {},
    }
  },
  computed: {
    isView() {
      return this.viewMode
    },
    tdClass() {
      return this.isView ? '' : 'input-td'
    },
    classType() {
      return this.customer.main_business
    },
    typeLabel() {
      return (
        enumTypeLabel[this.classType] || {
          business_spec0: '主要产业经营规模',
          business_spec1: '现有规模',
          business_spec2: '其余产业经营规模',
          business_spec3: '年产量',
        }
      )
    },
  },
  watch: {
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    checkRegisterNo(v) {
      if (!licenseValidate(v)) {
        this.$message.error('社会信用代码格式错误，请检查！')
        return false
      }
      return true
    },
    checkIdCard(v) {
      if (!idCardValidate(v)) {
        this.$message.error('身份证号格式错误，请检查！')
        return false
      }
      return true
    },
    checkMobileNo(v) {
      if (!checkPhoneNumber(v)) {
        this.$message.error('手机号格式错误，请检查！')
        return false
      }
      return true
    },
    onSubmit() {
      const data = {}
      Object.keys(this.customer).forEach(key => {
        if (this.customer[key] !== this.customerData[key]) {
          data[key] = this.customer[key]
        }
      })
      this.$api
        .updateData(this.$serviceName, this.tableName, this.queryId, data)
        .then(() => {
          this.$message.success('保存成功')
          this.$emit('success')
        })
        .catch(() => {
          this.$message.error('保存失败，请重试！')
        })
    },
    setClassName(name, v) {
      this.customer.org_class_name = name || ''
      this.customer.customer_type = v.customerType || ''
      if (+v.customerType === 2) {
        this.customer.register_no = ''
      }
    },
    getData() {
      this.customer = {}
      if (!this.queryId) {
        return
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, { 'credit_industrial_id.eq': this.queryId })
        .then(res => {
          this.customer = res?.data?.[0] ?? {}
          this.customerData = { ...this.customer }
        })
        .finally(() => {
          this.loading = false
        })
    },
    beforClose() {
      this.customer = { ...this.customerData }
      this.$emit('close', false)
    },
  },
}
</script>

<style lang="scss" scoped>
.table-vertical-middle td {
  vertical-align: middle;
}
.td-label {
  background-color: #f8f9fa;
  text-align: center;
}
.input-td {
  background-color: #ffffee;
}
</style>
